<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
      <a-form-model
        ref="ruleAddForm"
        :model="addForm"
        :rules="addRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-form-model-item label="组织名称" prop="organizationName" :style="itemStyle">
          <a-input placeholder="请输入组织名称" v-model="addForm.organizationName" type="text" />
        </a-form-model-item>
        <a-form-model-item prop="organizationCode" label="组织编号" :style="itemStyle">
          <a-input placeholder="请输入组织编号" v-model="addForm.organizationCode" />
        </a-form-model-item>
        <a-form-model-item prop="name" :style="itemStyle" label="姓名">
          <a-input placeholder="请输入姓名" v-model="addForm.name" />
        </a-form-model-item>
        <a-form-model-item prop="phoneNumber" :style="itemStyle" label="手机号">
          <a-input placeholder="请输入手机号" v-model="addForm.phoneNumber" />
        </a-form-model-item>
        <a-form-model-item prop="adminPassword" :style="itemStyle" label="登录密码">
          <a-input placeholder="请输入登录密码" v-model="addForm.adminPassword" />
        </a-form-model-item>
        <a-form-model-item label="过期时间" prop="thruDate" :style="itemStyle">
          <a-date-picker
            placeholder="请选择时间"
            v-model="addForm.thruDate"
            value-format="YYYY-MM-DD"
            :disabledDate="disabledDate"
            style="width: 100%;"/>
        </a-form-model-item>
        <a-form-model-item prop="address" :style="itemStyle" label="地址">
          <a-input placeholder="请输入地址" v-model="addForm.address" />
        </a-form-model-item>
        <a-form-model-item prop="remark" :style="itemStyle" label="备注">
          <a-input placeholder="请输入备注" v-model="addForm.remark" />
        </a-form-model-item>
        <a-form-model-item label="角色" prop="roleIds" style="float: left;width: 100%;" :wrapper-col="{ span: 20}" :labelCol="{ span: 3 }">
          <a-tree-select
            :replaceFields="replaceFields"
            :default-expanded-keys="Ids"
            :default-selected-keys="Ids"
            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
            tree-checkable
            tree-default-expand-all
            :tree-data="treeData"
            :max-tag-count="10"
            tree-node-filter-prop="name"
            placeholder="请选择角色"
            v-model="addForm.roleIds"
            @change="onChange">
          </a-tree-select>
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { getPlatformRoles } from '@/api/resource'
import { addTenants, detailTenants } from '@/api/lessee'
import { verifyPhone, verifyPassword } from '@/utils/verificate'
import moment from 'moment'
export default {
    components: {},
    data () {
        return {
            addRules: {
                roleIds: [
                    { required: true, message: '请选择角色!', trigger: 'change' }
                ],
                organizationName: [
                    { required: true, message: '请输入组织名称!', trigger: 'blur' }
                ],
                organizationCode: [
                    { required: true, message: '请输入编号!', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名!', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required: true, message: '请输入手机号!', trigger: 'blur' },
                   { validator: verifyPhone }
                ],
                adminPassword: [
                    { required: true, message: '请输入登录密码!', trigger: 'blur' },
                    { validator: verifyPassword }
                ],
                thruDate: [
                    { required: true, message: '请选择过期时间!', trigger: 'change' }
                ]
            },
            // 角色
            treeData: [],
            replaceFields: { children: 'children', label: 'name', value: 'roleId', key: 'roleId' },
            // 表单
            addForm: {
                roleIds: null,
                organizationName: '',
                organizationCode: '',
                name: '',
                phoneNumber: '',
                adminPassword: '',
                thruDate: '',
                remark: '',
                address: ''
            },
            wrapperCol: { span: 16 },
            labelCol: { span: 6 },
            iconChooseVisible: false,
            itemStyle: 'float: left;width: 50%;min-width:300px',
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            Ids: null
        }
    },
    methods: {
        disabledDate (current) {
            return current && current < moment().endOf('day')
        },
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            getPlatformRoles().then(res => {
                if (res.code == 200) {
                    this.treeData = res.data
                    this.treeData.forEach(el => {
                        el.children = []
                    })
                }
            })
            return this
        },
        // 角色
        onChange (value) {
            console.log(value)
            this.Ids = value
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
            if (this.mode == 'edit') {
                detailTenants(row.tenantId).then(res => {
                    if (res.code == 200) {
                        this.addForm = res.data
                        console.log(res)
                        this.addForm.roleIds = res.data.roleTypes.map(item => {
                            return item.roleTypeId
                        })
                    }
                })
            }
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
            // 重置表单数据
            this.$refs.ruleAddForm.resetFields()
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    const par = {
                        roleIds: this.Ids,
                        organizationName: this.addForm.organizationName,
                        organizationCode: this.addForm.organizationCode,
                        name: this.addForm.name,
                        phoneNumber: this.addForm.phoneNumber,
                        adminPassword: this.addForm.adminPassword,
                        thruDate: this.addForm.thruDate,
                        remark: this.addForm.remark,
                        address: this.addForm.address
                    }
                    // if (this.mode == 'edit') par.roleIds = this.addForm.roleIds
                    // let Api = this.mode == 'add' ? addTenants : editResources
                    addTenants(this.addForm).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" >
</style>
